<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<style>
			.fl {
				float: left;
			}
			
			.fr {
				float: right;
			}
			
			blockquote,
			body,
			dd,
			div,
			dl,
			dt,
			fieldset,
			form,
			h1,
			h2,
			h3,
			h4,
			h5,
			h6,
			img,
			input,
			li,
			ol,
			p,
			table,
			td,
			textarea,
			th,
			ul {
				margin: 0;
				padding: 0;
			}
			
			.clearfix {
				zoom: 1;
			}
			
			.clearfix:after {
				clear: both;
			}
			
			.clearfix:after {
				content: '.';
				display: block;
				overflow: hidden;
				visibility: hidden;
				font-size: 0;
				line-height: 0;
				width: 0;
				height: 0;
			}
			
			a {
				text-decoration: none;
				color: #333;
			}
			
			img {
				vertical-align: middle;
			}
			
			.page-shopping-cart {
				width: 1200px;
				margin: 50px auto;
				font-size: 14px;
				border: 1px solid #e3e3e3;
				border-top: 2px solid #317ee7;
			}
			
			.page-shopping-cart .cart-title {
				color: #317ee7;
				font-size: 16px;
				text-align: left;
				padding-left: 20px;
				line-height: 68px;
			}
			
			.page-shopping-cart .red-text {
				color: #e94826;
			}
			
			.page-shopping-cart .td-check {
				width: 70px;
			}
			
			.page-shopping-cart .td-product {
				width: 460px;
			}
			
			.page-shopping-cart .td-num,
			.page-shopping-cart .td-price,
			.page-shopping-cart .td-total {
				width: 160px;
			}
			
			.page-shopping-cart .td-do {
				width: 150px;
			}
			
			.page-shopping-cart .cart-product-title {
				text-align: center;
				height: 38px;
				line-height: 38px;
				padding: 0 20px;
				background: #f7f7f7;
				border-top: 1px solid #e3e3e3;
				border-bottom: 1px solid #e3e3e3;
			}
			
			.page-shopping-cart .cart-product-title .td-product {
				text-align: center;
				font-size: 14px;
			}
			
			.page-shopping-cart .cart-product-title .td-check {
				text-align: left;
			}
			
			.page-shopping-cart .cart-product-title .td-check .check-span {
				margin: 3px 0 0 0;
			}
			
			.page-shopping-cart .cart-product {
				padding: 0 20px;
				text-align: center;
			}
			
			.page-shopping-cart .cart-product table {
				width: 100%;
				text-align: center;
				font-size: 14px;
			}
			
			.page-shopping-cart .cart-product table td {
				padding: 20px 0;
			}
			
			.page-shopping-cart .cart-product table tr {
				border-bottom: 1px dashed #e3e3e3;
			}
			
			.page-shopping-cart .cart-product table tr:last-child {
				border-bottom: none;
			}
			
			.page-shopping-cart .cart-product table .product-num .num-do {
				width: 24px;
				height: 28px;
				display: block;
				background: #f7f7f7;
			}
			
			.page-shopping-cart .cart-product table .product-num .num-input {
				width: 42px;
				height: 28px;
				line-height: 28px;
				border: none;
				text-align: center;
			}
			
			.page-shopping-cart .cart-product table .td-product {
				font-size: 12px;
				line-height: 20px;
			}
			
			.page-shopping-cart .cart-product table .td-product img {
				border: 1px solid #e3e3e3;
				margin-right: 10px;
			}
			
			.page-shopping-cart .cart-product table .td-product .product-info {
				display: inline-block;
				vertical-align: middle;
			}
			
			.page-shopping-cart .cart-product table .td-do {
				font-size: 12px;
			}
			
			.page-shopping-cart .cart-product-info {
				height: 50px;
				line-height: 50px;
				background: #f7f7f7;
				padding-left: 20px;
			}
			
			.page-shopping-cart .cart-product-info .delect-product {
				color: #666;
			}
			
			.page-shopping-cart .cart-product-info .product-total {
				font-size: 14px;
				color: #e94826;
			}
			
			.page-shopping-cart .cart-product-info .product-total span {
				font-size: 20px;
			}
			
			.page-shopping-cart .cart-product-info .check-num {
				color: #333;
			}
			
			.page-shopping-cart .cart-product-info .check-num span {
				color: #e94826;
			}
			
			.page-shopping-cart .cart-product-info .keep-shopping {
				color: #666;
				margin-left: 40px;
			}
			
			.page-shopping-cart .cart-product-info .btn-buy {
				height: 50px;
				color: #fff;
				font-size: 20px;
				display: block;
				width: 110px;
				background: #ff7700;
				text-align: center;
				margin-left: 30px;
			}
			
			.page-shopping-cart .cart-worder {
				padding: 20px;
			}
			
			.page-shopping-cart .cart-worder .choose-worder {
				color: #fff;
				display: block;
				background: #39e;
				width: 140px;
				height: 40px;
				line-height: 40px;
				border-radius: 4px;
				text-align: center;
				margin-right: 20px;
			}
			
			.page-shopping-cart .cart-worder .worker-info {
				color: #666;
			}
			
			.page-shopping-cart .cart-worder .worker-info img {
				border-radius: 100%;
				margin-right: 10px;
			}
			
			.page-shopping-cart .cart-worder .worker-info span {
				color: #000;
			}
			
			.choose-worker-box {
				width: 620px;
				background: #fff;
			}
			
			.choose-worker-box .box-title {
				height: 40px;
				line-height: 40px;
				background: #F7F7F7;
				text-align: center;
				position: relative;
				font-size: 14px;
			}
			
			.choose-worker-box .worker-list {
				padding-top: 30px;
				height: 134px;
				overflow-y: auto;
			}
			
			.choose-worker-box .worker-list li {
				float: left;
				width: 25%;
				text-align: center;
				margin-bottom: 30px;
			}
			
			.choose-worker-box .worker-list li p {
				margin-top: 8px;
			}
			
			.choose-worker-box .worker-list li.cur a {
				color: #f70;
			}
			
			.choose-worker-box .worker-list li.cur a img {
				border: 1px solid #f70;
			}
			
			.choose-worker-box .worker-list li a:hover {
				color: #f70;
			}
			
			.choose-worker-box .worker-list li a:hover img {
				border: 1px solid #f70;
			}
			
			.choose-worker-box .worker-list li img {
				border: 1px solid #fff;
				border-radius: 100%;
			}
			.nullBox{
				font-size: 30px;
				color: #E94826;
				font-weight: bold;
				text-align: center;
				line-height: 100px;
				width: 100%;
				min-height: 100px;
			}
		</style>
	</head>

	<body>
		<div class="page-shopping-cart" id="shopping-cart">
			<h4 class="cart-title">购物清单</h4>
			<div class="cart-product clearfix">
				<table>
					<tbody>
						<tr>
							<th><input id="all" @click="checkAll($event)" type="checkbox" /></span>全选</th>
							<th>商品</th>
							<th>数量</th>
							<th>单价(元)</th>
							<th>金额(元)</th>
							<th>操作</th>
						</tr>
						<template v-if="this.productList.length!=0">
							<tr v-for="(item,index) in productList" :key="item.id">
							<td class="td-check"><span class="check-span"><input @click="deepCheck" class="checkItem" ref="dataList" type="checkbox" :value="item.id" v-model="checkData"/></span></td>
							<td class="td-product"><img :src="item.pro_img" width="98" height="98">
								<div class="product-info">
									<h6>{{item.pro_name}}</h6>
									<p>品牌：{{item.pro_brand}}&nbsp;&nbsp;产地：{{item.pro_place}}</p>
									<p>规格/纯度:{{item.pro_purity}}&nbsp;&nbsp;起定量：{{item.pro_min}}</p>
									<p>配送仓储：{{item.pro_depot}}</p>
								</div>
								<div class="clearfix"></div>
							</td>
							<td class="td-num">
								<div class="product-num">
									<button @click="reduce(index)" :disabled="item.pro_num==1">-</button> {{item.pro_num}}
									<button @click="add(index)">+</button>
								</div>
							</td>
							<td class="td-price">
								<p class="red-text">￥<span class="price-text">{{item.pro_price.toFixed(2)}}</span></p>
							</td>
							<td class="td-total">
								<p class="red-text">￥<span class="total-text">{{item.pro_price*item.pro_num}}</span>.00</p>
							</td>
							<td class="td-do">
								<button @click="remove(item.id)">移除</button>
							</td>
						</tr>
						</template>
						<template v-else>
							<div class="nullBox">数据为空！</div>
						</template>
					</tbody>
				</table>
			</div>
			<div class="cart-product-info">
				<button @click="delChangeGoods">删除所选商品</button>
				<a class="btn-buy fr" href="javascript:;">去结算</a>
				<p v-if="totalprice!=0" class="fr product-total">￥<span>{{totalprice}}</span></p>
				<p v-else class="fr product-total">￥<span>0</span></p>
				<p class="fr check-num"><span>{{totalNum}}</span>件商品总计（不含运费）：</p>
			</div>

		</div>
		<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
		<script>
			var vm =new Vue({
				el: '#shopping-cart',
				data: {
					totalNum: 0,
					checkData: [],
					totalprice: 0,
					indexList: '',
					productList: [{
							'id': 1,
							'pro_name': '【斯文】甘油 | 丙三醇11', //产品名称
							'pro_brand': 'skc', //品牌名称
							'pro_place': '韩国', //产地
							'pro_purity': '99.7%', //规格
							'pro_min': "215千克", //最小起订量
							'pro_depot': '上海仓海仓储', //所在仓库
							'pro_num': 1, //数量
							'pro_img': 'images/dog_cut.jpg', //图片链接
							'pro_price': 800 //单价
						},
						{
							'id': 2,
							'pro_name': '【斯文】甘油 | 丙三醇22', //产品名称
							'pro_brand': 'skc', //品牌名称
							'pro_place': '韩国', //产地
							'pro_purity': '99.7%', //规格
							'pro_min': "215千克", //最小起订量
							'pro_depot': '上海仓海仓储', //所在仓库
							'pro_num': 1, //数量
							'pro_img': 'images/dog_cut.jpg', //图片链接
							'pro_price': 800 //单价
						},
						{
							'id': 3,
							'pro_name': '【斯文】甘油 | 丙三醇33', //产品名称
							'pro_brand': 'skc', //品牌名称
							'pro_place': '韩国', //产地
							'pro_purity': '99.7%', //规格
							'pro_min': "215千克", //最小起订量
							'pro_depot': '上海仓海仓储', //所在仓库
							'pro_num': 1, //数量
							'pro_img': 'images/dog_cut.jpg', //图片链接
							'pro_price': 800 //单价
						}
					]
				},
				mounted() {

				},
				watch: { // 监视双向绑定的数据数组
					checkData: {
						handler() { // 数据数组有变化将触发此函数
							this.totalNum = this.checkData.length;
							if(this.checkData.length == this.productList.length) {
								document.querySelector('#all').checked = true;
							} else {
								document.querySelector('#all').checked = false;
							}
						},
						deep: true // 深度监视
					}
				},
				methods: {
					reduce: function(index) {
						if(this.productList[index].pro_num == 1) {
							return
						} else {
							this.productList[index].pro_num--;
							this.deepCheck();
						}
					},
					add: function(index) {
						this.productList[index].pro_num++;
						this.deepCheck();
					},
					remove: function(id) {
						console.log('移除商品的Id',id);	
						console.log('checkData1',this.checkData);	
						for(var j=0;j<this.checkData.length;j++){
							if(this.checkData[j] == id){
								this.checkData.splice(j,1);
								console.log('checkData2',this.checkData);	
								this.totalNum = this.checkData.length;
							}
						}
						
						for(var i=0;i<this.productList.length;i++){
							if(this.productList[i].id == id){
								this.productList.splice(i,1);
								
							}
						}
						setTimeout(() => {
							this.deepCheck();
						}, 30)					
					},
					checkAll: function(e) {
						if(e.target.checked) {
							this.productList.forEach((el, i) => {
								// 数组里没有这一个value才push，防止重复push
								if(this.checkData.indexOf(el.id) == '-1') {
									this.checkData.push(el.id);
								}
							});
						} else { // 全不选选则清空绑定的数组
							this.checkData = [];
						}
						setTimeout(() => {
							this.deepCheck();
						}, 30)
					},
					deepCheck: function() {
						var totalpriceNew = 0;
						for(var i = 0; i < this.$refs.dataList.length; i++) {
							if(this.$refs.dataList[i].checked == true) {								
								totalpriceNew += this.productList[i].pro_num * this.productList[i].pro_price;
							}
						}
						this.totalprice = totalpriceNew;
					},
					delChangeGoods: function() {
						this.totalNum = 0;
						var arr = [];
						this.productList.forEach((el,i)=>{
							if(this.checkData.indexOf(el.id)=='-1'){
								arr.push(el);
								this.productList = arr;
								this.totalprice = 0;
								this.checkData = [];
							}else{
								this.productList = [];
								this.totalprice = 0;
								document.querySelector('#all').checked = false;
							}
						})

					}
				}
			})
		</script>
	</body>

</html>